<template>
  <div class="FundationDetail dy-main">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">{{ Title }}</x-header>
    </div>
    <div class="dy-body">
        <div class="top-info">
        <div>
          <p class="top">1.5520</p>
          <p>最新净值</p>
        </div>
        <div class="midline"></div>
        <div>
          <p class="top">0.12%</p>
          <p>日涨跌幅</p>
        </div>
      </div>
      <div class="topOption">
        <div v-for="(item, index) in prdInfo.tagList" :key="index">{{ item }}</div>
      </div>
      <div class="e-chart-map">
        <div class="dy-wapper">
          <div class="zx-charts">
            <div id="myChart_0" :style="{width: '100%', height: '4rem'}"></div>
          </div>
        </div>
      </div>
      <div class="timeRagne">
        <div :class="{checked: ischecked === 1}" @click="chooseTimeRange(1)">最近一月</div>
        <div :class="{checked: ischecked === 2}" @click="chooseTimeRange(2)">最近三月</div>
        <div :class="{checked: ischecked === 3}" @click="chooseTimeRange(3)">最近一年</div>
      </div>
      <div>
        <group>
          <cell title="产品说明" is-link></cell>
          <div class="tipMsg">
            <p>交易规则</p>
            <p>理财计划存续期间，00：00-16：30申购即时生效，当日起息。其他时间下一工作日起息。</p>
            <p>每天00：00-24：00接受赎回委托，0赎回费用。工作日00：00-09：00，本金实时到账，分红9：00后到账。</p>
          </div>
          <cell title="产品说明" is-link></cell>
          <cell title="产品提示及公告" is-link></cell>
        </group>
      </div>
    </div>
    <div class="dy-footer">
      <div class="button">
        <x-button type="primary" @click.native="dropClick()">定投</x-button>
        <div style="width:.5rem;"></div>
        <x-button type="primary" @click.native="buyClick()">购买</x-button>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  data () {
    return {
      num: '',
      Title: '',
      prdInfo: {},
      ischecked: 1,
      dataList1: ['1', '5', '10', '15', '20', '25', '30'],
      dataList2: ['1-1', '1-10', '1-20', '1-30', '2-10', '2-20', '2-30', '3-10', '3-20', '3-30'],
      dataList3: ['18-1', '18-2', '18-3', '18-4', '18-5', '18-6', '18-7', '18-8', '18-9', '18-10', '18-11', '18-12'],
      echartOption: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '5', '10', '15', '20', '25', '30']
        },
        yAxis: {
          type: 'value'
        },
        legend: {left: 0, top: 0, bottom: 0, right: 0},
        grid: {left: '30', top: '40rem', bottom: '30', right: 0},
        color: ['#FF6633'],
        series: [
          {
            type: 'line',
            data: [3, 1, 0, 4, 6, 2, 1, 4, 4, 5, 5],
            smooth: true
          }
        ]
      }
    }
  },
  computed: {
    getCurrentPlusInfo () {
      return this.$store.getters.getCurrentPlusInfo
    },
    myChart () {
      return this.$echarts.init(document.getElementById('myChart_0'))
    }
  },
  methods: {
    chooseTimeRange (i) {
      this.ischecked = i
      if (i === 1) {
        this.echartOption.xAxis.data = this.dataList1
      } else if (i === 2) {
        this.echartOption.xAxis.data = this.dataList2
      } else {
        this.echartOption.xAxis.data = this.dataList3
      }
      this.drawLine()
    },
    buyClick () {
    },
    dropClick () {
    },
    back () {
      this.$publicFun.goBack(this)
    },
    drawLine () {
      this.myChart.setOption(this.echartOption)
      this.myChart.resize()
    }
  },
  mounted () {
  }
}
</script>

<style lang="less">
  .FundationDetail{
    .dy-body{
      padding-bottom: 1rem;
      .top-info{
        display: flex;
        background: url('../../../../static/img/main-top-bg.png') no-repeat;
        height: 2rem;
        justify-content:center;
        align-items:center;
        .midline{
          background: #fff;
          width: .01rem;
          height: .6rem;
          margin: 0 .8rem;
        }
        &>div{
          color: #fff;
          text-align: center;
          .top{
            font-size: .5rem;
          }
        }
        .top-rate{
          font-size: 0.6rem;
          font-weight: bolder;
        }
      }
      .topOption{
        display: flex;
        >div{
          flex: 1;
          font-size: 0.24rem;
          text-align: center;
          height: 0.6rem;
          line-height: 0.6rem;
          border-bottom: 1px solid #DBDBDB;
        }
      }
      .timeRagne{
        display: flex;
        .checked{
          color: #F28300;
        }
        >div{
          flex: 1;
          font-size: 0.24rem;
          border: 1px solid #DBDBDB;
          text-align: center;
          height: 0.6rem;
          line-height: 0.6rem;
        }
      }
      .tipMsg{
        padding: 0.2rem;
        >p{
          font-size: 0.24rem;
        }
      }
    }
    .button{
      background: #fff;
      display: flex;
      padding: .2rem .3rem;
    }
  }
</style>
